<template>
	<view>
		<cu-custom bgColor="bg-gradual-red" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">搜索</block>
		</cu-custom>
		
		<view class="cu-bar search bg-white fixed" :style="{top: CustomBar +'px'}">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input  :adjust-position="false"   v-model="params.query"   type="text" placeholder="搜索图片、文章、视频"
				 confirm-type="search"></input>
			</view>
			<view class="action">
								<button @click="search"   class="cu-btn bg-green shadow-blur round">搜索</button>
			</view>
			
		</view>
		
		
		<!--商品展示区域 -->
		<view class="grid col-2 padding-sm">
			<view class="padding-sm" v-for="(item ,index)  in  products" v-bind:key="index">
				<view class="padding radius text-center shadow-blur bg-white">
					<view>
						<navigator open-type="navigate" url="../detail/detail">
							<image v-bind:src="imageSrc+item.image" mode="aspectFit"></image>
						</navigator>
					</view>
					<view class="text-lg">{{item.name}}</view>
					<view class="margin-top-sm text-Abc">
						{{item.price}} RMB
					</view>
				</view>
			</view>
		
		
		</view>
		
		
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					pageNum: 1,
					pageSize: 10,
					query: ''
				},
				products: [],
				imageSrc: this.$global.imageSrc,
				CustomBar:this.CustomBar
			}
		},
		onReachBottom:function(){
			this.params.pageNum++;
			this.init();
			
		},
		methods: {
			init: function() {
				this.$api.__api__skus(this.params).then((res) => {
					//查询商品已经成功
					let list = res.data.list;
					for (let i = 0; i < list.length; i++) {
						this.products.push(list[i])
					}
				})
			},
			search:function(){
				//判断一下输入框是否为空 ，如果不为空 搜索 如果为空 提示没有任何输入 
				this.products=[];
				this.init();
			}
			
			
		}
	}
</script>

<style>

</style>
